<script setup>
import { ref } from 'vue'
import { route } from 'uview-plus'
import { updatePwdApi } from '@/apis/user'
const formData = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
const formRef = ref(null)
const formRules = {
  oldPassword: [
    {
      type: 'string',
      required: true,
      message: '请输入旧密码',
      trigger: 'blur'
    },
    {
      type: 'string',
      min: 6,
      max: 20,
      message: '密码必须在6-20位之间',
      trigger: 'blur'
    }
  ],
  newPassword: [
    {
      type: 'string',
      required: true,
      message: '请输入新密码',
      trigger: 'blur'
    },
    {
      type: 'string',
      min: 6,
      max: 20,
      message: '密码必须在6-20位之间',
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    {
      type: 'string',
      required: true,
      message: '请输入确定密码',
      trigger: 'blur'
    },
    {
      type: 'string',
      min: 6,
      max: 20,
      message: '密码必须在6-20位之间',
      trigger: 'blur'
    },
    {
      type: 'string',
      validator(rule, value, callback) {
        if (value !== formData.value.newPassword) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}


// 修改
const onUpdatePwd = async () => {
  try {
    await formRef.value.validate()
    await updatePwdApi(formData.value)
    uni.showToast({
      title: '修改成功',
      icon: 'success'
    })
    setTimeout(() => {
      route({
        url: '/pages/user/login',
        type: 'to'
      })
    }, 1000);
  } catch (error) {
    console.log(error)
  }
}

</script>
<template>
  <view class="page">
    <view class="nav">
      <up-navbar :placeholder="true" border :autoBack="true" title="修改密码" rightIcon="more-dot-fill">
      </up-navbar>
    </view>
    <view class="content">
      <up-form class="form-box" :model="formData" :rules="formRules" ref="formRef" labelWidth="4rem">

        <up-form-item label="旧密码" prop="oldPassword" borderBottom>
          <up-input v-model="formData.oldPassword"></up-input>
        </up-form-item>

        <up-form-item class="item" label="新密码" prop="newPassword" borderBottom>
          <up-input v-model="formData.newPassword"></up-input>
        </up-form-item>

        <up-form-item class="item" label="确定密码" prop="confirmPassword" borderBottom>
          <up-input v-model="formData.confirmPassword"></up-input>
        </up-form-item>


        <up-form-item class="item">
          <up-button class="but" type="primary" text="确定修改" @click="onUpdatePwd" color="#52ABAD"
            shape="circle"></up-button>
        </up-form-item>
      </up-form>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  .content {
    padding-left: 2rem;
    padding-right: 2rem;

    .form-box {
      .item {
        .gender-item {
          margin-right: 2rem;
        }

        .but {
          height: 3rem;
          width: 60%;
          display: flex;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>